import $ipc from "@renderer/services/ipc/ipc.service"
import useAppStore from "@renderer/store/useAppStore"
import { useMemo } from "react"

export default function AppFooter() {
  const tasks = useAppStore(state => state.tasks)
  function reloadFailedTask() {
    $ipc.reloadFailedTask().subscribe()
  }
  const tipText = useMemo(() => {
    const successTasks = tasks.filter(e => e.state === 4)
    const totalInputSize = successTasks.reduce((acc, val) => acc + (val.storeResult?.size || 0), 0)
    const totalOutputSize = successTasks.reduce((acc, val) => acc + (val.processResult?.size || 0), 0)
    const totalCompressedSize = totalInputSize - totalOutputSize
    let totalCompressedSizeText = totalCompressedSize > 1000 * 1000 ? `${(totalCompressedSize / 1000 / 1000).toFixed(2)}M` : `${(totalCompressedSize / 1000).toFixed(2)}K`
    const percent = totalCompressedSize > 0 ? ((totalCompressedSize / totalInputSize) * 100).toFixed(2) : 0
    return totalCompressedSize ? `(-${totalCompressedSizeText},${percent}%)` : ""
  }, [tasks])
  return (
    <div className="px-4 text-white py-4 relative">
      <div className="text-xs flex flex-row items-center justify-between">
        <p>成功 <span className="text-green-400">{tasks.filter(e => e.state === 4).length}</span> 个<span className="text-green-400">{tipText}</span>，错误 <span className="text-red-500">{tasks.filter(e => e.state === 5).length}</span> 个</p> 
        {tasks.filter(e => e.state === 5).length > 0 && <a onClick={reloadFailedTask} className="underline cursor-pointer">重试失败任务</a>}
      </div>
      
    </div>
  )
}